<template>
  <div class="main">
    <header>
      <div>
        <div class="block">
          <span class="demonstration">日期：</span>
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
          <span
            style="border: 1px solid #dcdfe6; padding: 5px; margin-left: 10px"
            >选择影片</span
          >
        </div>
      </div>
    </header>
    <div class="content">
      <div class="content-header">
        <span @click="getPpData(1)" :class="{ active: active }">按场次</span>
        <span @click="getPpData(2)" :class="{ active: !active }">按坐位</span>
      </div>
      <div class="content-main">
        <div v-for="(item, index) in group" :key="item">
          <div class="cm-top">
            <span class="left-icon"></span>
            <span
              >排片{{ groupCat[index] }}({{
                active ? "场次" : "座位"
              }})-TOP10影片</span
            >
          </div>
          <div class="echart-item">
            <div class="echart-height" :ref="item" v-loading="vLoading"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetSort } from "@/api/sjda";
import theme from '@/echartsThem/purple-passion.json'
// import echarts from "echarts";
export default {
  data() {
    return {
      active: true,
      value1: "",
      rowpiecetype: 1,
      myChart: "",
      ppdata: [],
      group: ["table0", "table1", "table2", "table3"],
      groupCat: ["统计", "地域分布", "场次分布", "院线分布"],
      groupCount:["上午场","下午场","加映场","黄金场"],
      vLoading:true
    };
  },
  mounted() {
    this.$echarts.registerTheme('purple-passion',theme)
    this.getPpData(1);
  },
  methods: {
    getPpData(data) {
      this.active = !this.active;
      GetSort({
        r: "0.14361935937396408",
        rowpiecetype: data,
        datetype: "Day",
        date: "2022-08-18",
        sdate: "2022-08-18",
        edate: "2022-08-18",
      }).then((res) => {
        this.ppdata = []
        this.ppdata = res.data.data;
        //   遍历
        for (let i in this.$refs) {
          let options = {};
          if (i == "table0") {
            // ------------------饼图
            options = {
              title: {
                left: "center",
                top: "center",
              },
              series: [
                {
                  type: "pie",
                  data: [],
                  radius: ["30%", "60%"],
                },
              ],
            };
            //   数据填充
            this.ppdata.table0.forEach((item) => {
              let obj = {
                value: item.ShowCount,
                name: item.MovieName + " " + item.ShowPercent + "%",
              };
              options.series[0].data.push(obj);
            });
          } else {
            // ------------------树状图
            options = {
              tooltip: {
                trigger: "axis",
              },
              legend: {},
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
              },
              xAxis: {
                type: "value",
                axisLabel: {
                  //这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
                  formatter: "{value} 万元",
                },
              },
              yAxis: {
                
                inverse:true,
                type: "category",
                data: [],
              },
              series: [],
              // Y轴 电影名称
            };

            // y轴电影    x轴数据
            
            let tempArr = []
            if ( i == "table2") {
              this.ppdata.table2.forEach((item,index)=>{
                tempArr[index] = []
                options.yAxis.data.push(item.MovieName);
                for(let z in item){
                  if(z.indexOf("场") !==-1){
                    tempArr[index].push(item[z])
                  }
                }
              })
              // series-data数据填充
            this.groupCount.forEach((item,index)=>{
                let temp = {
                  name:item,
                  type: 'bar',
                  stack: 'total',
                  emphasis: {
                    focus: 'series'
                },
                data:[]
              }
              tempArr.forEach((item)=>{
                temp.data.push(item[index]/100)
              })
              options.series.push(temp)
            }) 
            } else {
              for (let a in this.ppdata[i][0]) {
                if (a.indexOf("|") != -1) {
                  a = a.slice(a.indexOf("|") + 1);
                  options.yAxis.data.push(a);
                }
              }
              //   x轴
              this.ppdata[i].forEach((item) => {
                let temp = {};
                temp.data = [];
                temp.stack = "total";
                temp.emphasis = {
                  focus: "series",
                };
                // 院线数据
                for (let b in item) {
                  if (b.indexOf("|") != -1) {
                    temp.data.push((item[b]/100));
                    // console.log(item[b]);
                  } else if (b == "CLevel") {
                    temp.stack = "total";
                  } else {
                    temp.name = item[b];
                    // console.log("temp[b]", item[b]);
                    temp.type = "bar";
                  }
                }
                options.series.push(temp);
                // console.log(options);
              });
            }

            // Y轴 电影名称
          }
          // 渲染echarts
          this.$echarts.init(this.$refs[i][0],"purple-passion").setOption(options);
        }
      });
    },
  },

  //   created() {},
};
</script>

<style scoped>
/* 日期 */


.echart-height {
  margin-top: 20px;
  padding-top: 13px;
  height: 348px;
  border: 1px solid #ececec;
  display: flex;
  justify-content: center;
}

.el-input__inner {
  height: 30px;
}
.el-input__icon.el-icon-date {
  line-height: 25px;
}
.active {
  color: #fff;
  background-color: #7030a0;
}
.main {
  box-sizing: border-box;
  /* height: 100%; */
  background-color: #e4e4e4;
  padding: 20px;
}
.main header,
.content {
  display: flow-root;
  width: 100%;
  background-color: #fff;
}

.main header {
  box-sizing: border-box;
  margin-bottom: 15px;
  padding: 15px;
}
.content-header {
  display: flow-root;
  padding-left: 20px;
  margin: 20px 0;
}
header,
.content {
  box-shadow: 0px 0px 10px -3px rgb(102, 101, 101);
}
.content-header > span {
  float: left;
  padding: 4px 24px;
  border: 1px solid #e0e4eb;
  cursor: pointer;
  font-size: 14px;
}
.content-header > span:last-of-type {
  border-left: none;
}
.content-main {
  width: 100%;
  background-color: #fff;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
  /* writing-mode: vertical-lr; */
  flex-wrap: wrap;
}
.content-main > div {
  /* writing-mode: horizontal-tb; */
  width: 48%;
  background-color: rgb(255, 255, 255);
  height: 406px;
  margin-bottom: 10px;
}
.cm-top {
  font-size: 15px;
  vertical-align: middle;
}
.cm-top span {
  vertical-align: middle;
}
.left-icon {
  display: inline-block;
  height: 16px;
  width: 3px;
  background-color: #7030a0;
  margin-right: 10px;
}
</style>